<template>
	<view class="content">
		<view class="user-info">
			<view class="topView" >
				<image class="setIcon" src="../../static/universal_back_trans.png" mode="widthFix" @click="toSetting"></image>
			    <view class="btnAdd" @click="btnAddAddr">保存</view>
			</view>
		    <view class="schoolInfo">
		    	
		    		<view class="imgG">
		    			<image :src="headerPic" mode="widthFix"></image>
		    		</view>
					<view class="Name">{{schoolName}}</view>
		    		<view class="lab1">{{schoolNameEng}}</view>
		    </view>
		</view>
		
		
		<view class="inputPsw">
			<view class="itemEdit">
				<image src="../../static/loginTwoInfutDetail-Edit.png" mode="widthFix"></image>
				<view class="lab1">编辑</view>
			</view>
			<view class="two" @click="btnSelectClick(1)">
				<view class="labName">{{msgDict.grade}}:</view>
				<view class="labVule">{{gradeText.className}}</view>
				<uni-icons type="arrowright" size="18" color="#333"></uni-icons>
			</view>
			<view class="two" @click="btnSelectClick(2)">
				<view class="labName">{{msgDict.Class}}:</view>
				<view class="labVule">{{classText.className}}</view>
				<uni-icons type="arrowright" size="18" color="#333"></uni-icons>
			</view>
			<view class="two">
				<view class="labName">{{msgDict.name}}:</view>
				<input type="text" placeholder="请输入学生姓名" v-model="nameText" />
			</view>
			<view class="two">
				<view class="labName">{{msgDict.gender}}:</view>
				<view class="sexVule">
					
					<!-- 1 为男 2 为 女 -->
					<view @tap.stop="selectMan('2')" class="all_select_box">
							
						<uni-icons :type="sexType == '2'?'checkbox-filled':'circle'" :color="sexType == '2'?'#5360FF':'#ccc'" size="24"></uni-icons>
							
						<view class="all_select">{{msgDict.woman}}</view>
					</view>
					<view @tap.stop="selectMan('1')" class="all_select_box">
							
						<uni-icons :type="sexType == '1'?'checkbox-filled':'circle'" :color="sexType == '1'?'#5360FF':'#ccc'" size="24"></uni-icons>
							
						<view class="all_select">{{msgDict.man}}</view>
					</view>
				</view>
			</view>
			<view class="two" @click="btnSelectClick(3)">
				<view class="labName">{{msgDict.age}}:</view>
				<view class="labVule">{{ageText}}</view>
				<uni-icons type="arrowright" size="18" color="#333"></uni-icons>
			</view>
			<view class="itemShow" @click.stop="btnItemEditClick(index)">
				<view class="star">*</view>
				<view class="lab2">建议您尽可能填写全部信息，以便我们为您提供更精准的选购服务</view>
			</view>
		</view>
		<!-- <view v-if="isEdit == 'edit'" class="btn" @click="btnAddAddr">
			{{msgDict.Edit}}
		</view>
		<view v-else class="btn" >
			{{msgDict.add}}
		</view> -->
		<uni-popup ref="popSex" type="bottom">
			<view class="categoryContent">
				<view class="pickerBtn">
					<view class="popBnt cancer" @click="cancerSex">{{msgDict.cancel}}</view>
					<view class="popBnt confirm" @click="confirmSex">{{msgDict.confirm}}</view>
				</view>
				 <view class="pickerView">
				   <picker-view class="picker" indicator-class="indicator" :value="showSexAndAgeStrat" @change="bindSexChange" @pickstart='bindSexStartChange' @pickend='bindSexEndChange'>
						<picker-view-column class="column">
						  <view v-for="(item, index) in showSexAndAgeData" :key="index">{{item.className}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popupContent">
				<view class="popupName">
					{{msgDict.enterName}}
				</view>
				<view class="inputG">
					<input type="text" :value="popName" @input="bindTextChange"/>
				</view>
				<view class="popupBtn">
					<view class="popupBnt" @click="btncancerClick">{{msgDict.cancel}}</view>
					<view class="popupBnt" @click="btnconfirmClick">{{msgDict.confirm}}</view>
				</view>
		    </view>
			
		</uni-popup>
	</view>
</template>

<script>
    import {schoolInfo,operateStu} from '../../api/index.js'
	
	export default {
		data() {
			return {
				//年级
				gradeArr:[],
				gradeSel:[0],
				gradeText:{className:'',classId:''},
				CategoryIndex:-1,
				showSexAndAgeStrat:[0],
				showSexAndAgeData:[],
				//班级
				classArr:[],
				classSel:[0],
				classText:{className:'',classId:''},
			    headerPic:'../../static/img_upload.png',
				nameText:'',
				popName:'',
				ageText:'',
				ageArr:[],
				ageSel:[0],
				sexType:1,
				isEdit:'',
				stuId:'',
				schoolCode:'',
				schoolName:'',
				schoolNameEng:'',
				schoolId:'',
				fromType:'',
				canBtn:false,
				userId:undefined,
				msgDict:{}

			}
		},
		onLoad(option) {
			
			
			this.msgDict = getApp().globalData.$t('loginTwoInfutDetail');
			
		
			this.userId = getApp().globalData.userId;
			this.fromType=uni.getStorageSync('fromType');
			
			
			
			
			if (option.type) {
				
				
				this.isEdit = option.type;
				if(option.type == 'edit'){
					
					let result = JSON.parse(decodeURIComponent(option.itemInfo));
					this.gradeText.className = result.gradeName;
					this.gradeText.classId = result.gradeId;
					this.classText.className = result.className;
					this.classText.classId = result.classId;
					
					this.nameText=result.stuName;
					this.sexType=result.sex;
					this.ageText=result.age;
					this.stuId = result.stuId;
					this.schoolName = result.schoolName;
					this.schoolNameEng = result.schoolNameEng;
					let schoolCode = result.schoolCode;
					this.schoolCode = schoolCode;
					
					this.schoolInfo(schoolCode,result.gradeId);
					
				}
				
			}
			

			if (option.item) {
				
			let result = JSON.parse(decodeURIComponent(option.item));
			this.schoolName = result.schoolCode + '  ' + result.schoolName;
			this.schoolId = result.schoolId;
			this.gradeArr = result.list;
			this.schoolNameEng = result.schoolNameEng;

			}
			
		
		let ageArr = [];
		for (let i = 2; i < 21; i++) {
			
			ageArr.push({className:''+i});
		}
		this.ageArr= ageArr
		   
			
		},
		
		methods: {
			//获取年级
			async schoolInfo(schoolCode,gradeId){
				// console.log('手机号码',schoolCode)
					
				let {result} = await schoolInfo({schoolCode:schoolCode});
				let gradeList  = result.list;
				this.gradeArr = gradeList;
				gradeList.some(v=>{
					
					if (v.classId == gradeId) {
						this.classArr = v.children;
					
					return true
						
					}
					
					
				})
				

			},
			//确认按钮
			async operateStu(dict){
				console.log(dict)
			      try{
					let {result} = await operateStu(dict);
					
					let needAddChild = getApp().globalData.needAddChild;
					if(needAddChild){
						
						//需要修改
						
						getApp().globalData.needAddChild = false;
						uni.setStorage({
							key:'needAddChild',
							data:'1'
						})
						
						getApp().globalData.appSchoolId = this.schoolId
						uni.setStorage({
							key:'appSchoolId',
							data:this.schoolId
						})
						
						getApp().globalData.stuId =result.id
						uni.setStorage({
							key:'stuId',
							data:result.id
						})
					

					}

					uni.showToast({
						icon:'success',
						title:'添加成功'
					})
					
					if(this.fromType == 'index'){
						setTimeout(()=>{
							uni.switchTab({
								url:'../index/index'
							})
						},400)
					// }else if(this.fromType == 'mina'){
						
					}else {
						
							//来着输入页
							let pages = getCurrentPages();
							let page = pages[1];
							console.log('pages',page)
							debugger
							page.$vm.isRefresh = true;
					    if(this.isEdit == 'input'){
							setTimeout(()=>{
								uni.navigateBack({
									delta: 3
								})
							},400)
							
							
						}else{
							
							setTimeout(()=>{
								uni.navigateBack({
									delta: 2
								})
							},400)
						}
					}
		
			      } catch(err) {
					// console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				   }
			},
			btnNameClick(){
				this.$refs.popup.open();
			},
			btncancerClick(){
				this.$refs.popup.close();
				
			},
			btnconfirmClick(){
				
				if (this.popName == '') {
					
					uni.showToast({
						icon:'none',
						title:this.enterName
					})
				
				return
					
				}
				
				this.nameText = this.popName;
				
				this.$refs.popup.close();
			},
			bindTextChange(e){
				this.popName = e.detail.value;
			},
			toSetting(){
				uni.navigateBack({
					delta:1
				})
			},
			upImg(){
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success(resinfo) {
						console.log('resinfo',resinfo);
						if (resinfo.errMsg == "chooseImage:ok") {
							this.headerPic = resinfo.tempFilePaths[0]
						} else{
							uni.showToast({
								icon:'none',
								title:'选取失败'
								
							})
						}
						
					}
					
					
				})
			},
			btnAddAddr(){
				
				if (this.gradeText.className == '') {
					
					 uni.showToast({
						title:this.msgDict.select + this.msgDict.grade,
						icon:'none'
					 })
					 
					 return
				 
				}else if (this.classText.className == '') {
					uni.showToast({
						title:this.msgDict.select + this.msgDict.Class,
						 icon:'none'
					})
					
					return
				} else if (this.nameText == ''){
					
					uni.showToast({
						title:this.msgDict.select + this.msgDict.name,
						icon:'none'
					})
					return 
				} else if (this.sexType == -1){
					
					uni.showToast({
						title:this.msgDict.select + this.msgDict.gender,
						icon:'none'
					})
					return 
				} else if (this.ageText == ''){
					
					uni.showToast({
						title:this.msgDict.select + this.msgDict.age,
						icon:'none'
					})
					return 	
						
				}else{
					let dict = {age:this.ageText,classId:this.classText.classId,schoolId:this.schoolId,sex:this.sexType,stuName:this.nameText,type:'1',userId:this.userId};
					
					this.operateStu(dict);
				}
			},
			selectMan(index){
				this.sexType = index
			},
			btnSelectClick(index){
				
				this.CategoryIndex=index;		
				if (index == 1) {
				//选择班级
				this.showSexAndAgeData=this.gradeArr;
				this.showSexAndAgeStrat=this.gradeSel;
			
				
				
				} else if(index == 2){
					
					// console.log('de',this.customizatList[index].changeSel);
					if (this.gradeText.className == '') {
						
					uni.showToast({
						icon:'none',
						title:this.msgDict.select + this.msgDict.grade,
					})
					
					return
						
					}
					
					
				//选择年级
				this.showSexAndAgeData=this.classArr;
				this.showSexAndAgeStrat=this.classSel;
				
				}else if(index == 3){
					//选择年龄
					this.showSexAndAgeData=this.ageArr;
					this.showSexAndAgeStrat=this.ageSel;
				}
				
				// #ifdef APP-PLUS
				this.showSexAndAgeStrat=[0];
				// #endif
				
				this.$refs.popSex.open();
			},
			//取消
			cancerSex(){
				this.$refs.popSex.close();
			},
			confirmSex(){
				this.$refs.popSex.close();
				let index = this.CategoryIndex;
				let selectIndex = this.showSexAndAgeStrat[0];
				if (index == 1) {
					//年级
					this.gradeText.className = this.showSexAndAgeData[selectIndex].className;
					this.gradeText.classId = this.showSexAndAgeData[selectIndex].classId;
					this.classArr = this.showSexAndAgeData[selectIndex].children;
					
					
					// #ifdef MP-WEIXIN
					this.gradeSel = this.showSexAndAgeStrat
					// #endif
					
				} else if(index == 2){
					
					this.classText.className = this.showSexAndAgeData[selectIndex].className;
					this.classText.classId = this.showSexAndAgeData[selectIndex].classId;
					// #ifdef MP-WEIXIN
					this.classSel = this.showSexAndAgeStrat
					// #endif
				}else if(index == 3){
					
					this.ageText = this.showSexAndAgeData[this.showSexAndAgeStrat[0]].className;
					// #ifdef MP-WEIXIN
					this.ageSel = this.showSexAndAgeStrat
					// #endif
				}
				
			},
			bindSexChange(e){
				console.log('bindCategoryChange',e);
				this.showSexAndAgeStrat=e.detail.value;
				
			},
			bindSexStartChange(){
				console.log('321开始转动');
				this.canBtn = true
				
			},
			bindSexEndChange(){
				console.log('321结束转动');
				this.canBtn  =false
			},
			
		}
	}
</script>

<style>
	page{
		background-color: #F8F9FD;
	}
    .user-info {
	    
		background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		height: 330rpx;
	}
	.topView{
		
	    padding-top: calc(22upx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		
	}
	.topView .btnAdd{
			color: #fff;
			font-size: 30rpx;
    }
	.schoolInfo{
		margin: 90rpx 10rpx 0;
		background-color: #fff;
		padding-bottom: 54rpx;
		border-radius: 16rpx;
	}
	.schoolInfo .imgG{
		width: 160rpx;
		height: 160rpx;
		margin-top: -100rpx;
		border-radius: 80rpx;
		background-color: #fff;
		margin-left: 265rpx;
		
	
	}
	.imgG image{
		margin: 12rpx 0 0 12rpx;
		width: 137rpx;
		/* height: 100%; */
		border-radius: 50%;
	}
	.schoolInfo .Name{
		color: #333;
		font-size: 36rpx;
		margin-top: 24rpx;
		font-weight: bold;
		text-align: center;
	}
	.schoolInfo .lab1{
		margin-top: 26rpx;
		color: #666;
		font-size: 30rpx;
		margin-top: 20rpx;
		font-weight: 400;
		text-align: center;
		
	}
	.setIcon{
		width: 60rpx;
		height: 60rpx;
	}
	
	.inputPsw{
		margin-top: 150rpx;
		padding: 0 30rpx;
		
	}
	.inputPsw .two{
		padding: 0 30rpx;
		background-color: #FFFFFF;
		height: 110upx;
		border-bottom: 1upx solid #f2f2f2;
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		align-items: center;
	}
		
	.inputPsw .itemEdit{
		display: flex;
		background-color: #fff;
        font-size: 28rpx;
		color: #333333;
		padding-top: 30rpx;
		padding-left: 30rpx;
		border-radius: 16rpx 16rpx 0 0;
	
	}
	.itemEdit image{
		width: 35rpx;
		margin-right: 16rpx;
	}
	.itemShow{
		display: flex;
		background-color: #fff;
		padding:30rpx;
		border-radius: 0 0  16rpx 16rpx;
	}
	.itemShow .lab2{
		font-size: 20rpx;
		color: #0005C9;
	}
	.itemShow .star{
		font-size: 20rpx;
		
		color: #FF2121;
	}
	.two .labName{
		color: #333;
		font-size: 28rpx;
		font-weight: bold;
		padding-right: 30rpx;
	}
	.two .labVule{
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}
	.two input{
		flex: 1;
	}
	.labVule .uni-icons{
		position: relative;
		top: 4rpx;
	}
	.sexVule{
		display: flex;
	    flex-direction: row;
	}
	.all_select_box {
		width: 140rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 20rpx;
		/* padding-left: 30upx; */
	}
	.all_select {
		width: 40rpx;
		/* padding-left: 20rpx; */
		color: #666;
		font-size: 28rpx;
		/* text-align: right; */
		white-space: nowrap;
		line-height: 50rpx;
		margin-left: 10rpx;
		
	}
	.btn{
		   color: #fff;
		   background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
		   box-shadow: 0px 2px 24px 0px rgba(80, 58, 225, 0.36);
		   height: 80rpx;
		   line-height: 80rpx;
		   border-radius: 40rpx;
		    /* margin-top: 30rpx; */
		   margin: 200rpx 40rpx;
		   font-size: 32rpx;
		   text-align: center;
		   
	   }
	   
	   
	   
	   .categoryContent{
	   		width: 750upx;
	   		background-color: #fff;
			padding-bottom: 40rpx;
	   		
	   	}
		.pickerBtn{
		
			height: 101rpx;
			line-height: 101rpx;
			background-color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: thin solid #ccc;
			padding: 0 20rpx;
		}
		.popBnt{
			width: 80upx;
			text-align: center;
		}
		.cancer {
			color: #666666;
		}
		.confirm{
			color: #0005C9;
		}
		
	   	.picker {
	   	  background-color: #fff;
	   	  width: 100%;
	   	  height: 370rpx;
	   	  }
	   	  .column {
	   		font-size: 40rpx;
	   		color: #333;
	   		text-align: center;
	   		line-height: 80rpx;
	   	  }
	   	  .indicator {
	   		  height: 80rpx;
	   		  border-top: thin solid #f2f2f2;
	   		  border-bottom:thin solid #f2f2f2;
	   		}
	   	
			.popupContent{
				/* margin:0 40rpx; */
				background-color: #fff;
				/* height: 400rpx; */
				border-radius: 20rpx;
				padding-top: 40rpx;
				width: 500rpx;
			}
			.popupName{
				font-size: 33rpx;
				font-weight: 400;
				text-align: center;
				
			}
			.inputG{
				margin-top: 20rpx;
				padding: 30rpx;
				/* height: 40rpx; */
			}
			.inputG input{
				background-color: #fff;
				border:  thin solid #dcdcdc;
				/* width: 100%; */
				padding-left: 10rpx;
				caret-color:#4CD964;
				height: 70rpx;
				font-size: 32rpx;
				border-radius: 10rpx;
			}
			.popupBtn{
				display: flex;
				justify-content: space-between;
				border-top: thin solid #dcdcdc;
				margin-top: 40rpx;
			}
				
			.popupBnt{
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #ccc;
				font-weight: 400;
				font-size: 34rpx;
			}
			.popupBnt:last-child{
				border-left:thin solid #dcdcdc;
				color: #1E90FF;
			}
</style>
